<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
    }">
		<view :style="{
		  height: statusBarHeight + 'px',
		}">
		</view>
		<view class="head" :style="{
			  top: statusBarHeight + 'px',
			}">
			<view class="head_left">
				<u-icon name="arrow-left" color="#000" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">邀请成员</view>
		</view>
		<view class="search_head">
			<view class="search_inp">
				<u--input placeholder="请输入内容" border="none" shape="circle" v-model="value" @change="change"
					@confirm="confirm" :style="{
							'background':'#F4F4F4',
							'height':'80rpx'
						}" prefixIcon="search" prefixIconStyle="font-size: 52rpx;color: #909399;padding-left:32rpx;"></u--input>
			</view>
			<view class="search_text" @click="search">
				<!-- 取消 -->
				{{is_text?'搜索':'取消'}}
			</view>
		</view>
		<scroll-view :style="{
				'height':scrollHeihgt + 'px'
			}" :scroll-y="true" @scroll="scroll" @scrolltolower="scrolltolower">
			<view class="box">
				<view class="box_item" v-for="(item,index) in list" :key="index">
					<view class="item_left">
						<image :src="item.avatar_url" mode=""></image>
						<view class="item_left_text">
							{{item.nick_name}}
						</view>
					</view>
					<view class="item_right" @click="yaoqing(item)" v-if="item.is_yaoqing == 0 && item.is_add == 0">
						邀请
					</view>
					<view class="item_right1" v-else-if="item.is_add == 1">
						已加入
					</view>
					<view class="item_right1" v-else-if="item.is_yaoqing == 1">
						已邀请
					</view>
				</view>
			</view>
		</scroll-view>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import {
		searchUser,
		yaoqing
	} from '@/common/api/start.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				value: '',
				id: -1,
				scrollHeihgt: 0,
				list: [],
				total: 0,
				page: 1,
				is_text: true
			}
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
			const windowHeihgt = statusBarHeight.windowHeight;
			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});

			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.head').fields({
					size: true
				})
				query.select('.search_head').fields({
					size: true
				})
				query.exec((data) => {
					console.log('data', data);
					let sum = 0
					data.forEach((item) => {
						sum += item.height;
					})
					this.scrollHeihgt = windowHeihgt - sum;
				});
			});
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
				this.getList();
			}
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() {
				searchUser({
					xinghe_id: this.id,
					keywords: this.value,
					page: this.page
				}).then(res => {
					console.log('resssss', res);
					this.list.push(...res.data.list.data);
					this.total = res.data.list.total
				})
			},
			scrolltolower() {
				console.log('this.tot', this.total, this.list.length);
				if (this.total == this.list.length) {

				} else {
					this.page += 1;
					this.getList();
				}
			},
			yaoqing(item) {
				yaoqing({
					user_id: item.user_id,
					xinghe_id: this.id
				}).then(res => {
					uni.$u.toast("邀请已发送");
					item.is_yaoqing = 1;
				}).catch(err => {
					uni.$u.toast(err);
				})
			},
			search() {
				this.list = [];
				if (this.is_text) {
					this.is_text = false
					this.getList();
				} else {
					this.is_text = true;
					this.value = '';
					this.getList();
				}

			},
			confirm(text) {
				this.list = [];
				this.getList();
			},
			change() {

			},
			scroll() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #55B877;
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
		}
	}

	.search_head {
		width: 100%;
		height: 80rpx;
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;

		.search_inp {
			flex: 1;
			height: 80rpx;
		}

		.search_text {
			width: 84rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;

		.box_item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 32rpx;

			.item_left {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.item_left_text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #444444;
					margin-left: 24rpx;
				}
			}

			.item_right {
				width: 180rpx;
				height: 64rpx;
				background: #55B877;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			.item_right1 {
				width: 180rpx;
				height: 64rpx;
				background: #eee;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #888;
			}
		}
	}
</style>